import { cn } from '@/lib/utils'

interface ActivityCardProps {
  title: string
  description: string
  coverUrl: string
  startTime: string
  endTime: string
  location: string
  price: number
  currentParticipants: number
  maxParticipants: number
  onClick?: () => void
}

export function ActivityCard({ 
  title, 
  description, 
  coverUrl, 
  startTime,
  endTime,
  location,
  price,
  currentParticipants,
  maxParticipants,
  onClick 
}: ActivityCardProps) {
  const isFull = currentParticipants >= maxParticipants
  
  return (
    <div 
      className={cn(
        "bg-gradient-to-br from-[#FFF8DC] to-[#FAF8F3] rounded-2xl border border-yellow-100",
        "p-4 shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer overflow-hidden relative"
      )}
      onClick={onClick}
    >
      <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-yellow-200/30 to-transparent rounded-full -translate-y-16 translate-x-16" />
      
      <div className="flex gap-4">
        <div className="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0">
          <img 
            src={coverUrl} 
            alt={title}
            className="w-full h-full object-cover"
          />
        </div>
        
        <div className="flex-1 min-w-0">
          <h3 className="font-semibold text-gray-800 text-sm mb-1 line-clamp-1">
            {title}
          </h3>
          <p className="text-gray-600 text-xs mb-2 line-clamp-2">
            {description}
          </p>
          
          <div className="space-y-1 text-xs text-gray-500">
            <div className="flex items-center gap-1">
              <span>🕐</span>
              <span>{startTime} - {endTime}</span>
            </div>
            <div className="flex items-center gap-1">
              <span>📍</span>
              <span>{location}</span>
            </div>
            <div className="flex items-center gap-1">
              <span>👥</span>
              <span>{currentParticipants}/{maxParticipants}人</span>
            </div>
          </div>
          
          <div className="flex items-center justify-between mt-3">
            <span className="text-lg font-bold text-[#2C5282]">
              {price === 0 ? '免费' : `¥${price}`}
            </span>
            <span className={cn(
              "px-3 py-1 rounded-full text-xs font-semibold",
              isFull ? "bg-gray-200 text-gray-500" : "bg-green-100 text-green-700"
            )}>
              {isFull ? '已满' : '可报名'}
            </span>
          </div>
        </div>
      </div>
    </div>
  )
}